<template>
    <div class="wrapper">
        <top-header title="商家注册"></top-header>
        <scroller :show-scrollbar="false" class="content">
            <div>
                <div class="car_info">
                    <text class="car_info_name">商家名称</text>
                    <input type="text" class="car_info_input" v-model="form.storename" placeholder="请输入商家名称"/>
                </div>
                <div class="car_info">
                    <text class="car_info_name">负责人</text>
                    <input type="text" class="car_info_input" v-model="form.ownername" placeholder="请输入负责人"/>
                </div>
                <div class="car_info">
                    <text class="car_info_name">商家手机号</text>
                    <input type="number" class="car_info_input" v-model="form.ownerphone" placeholder="请输入商家手机号"/>
                </div>
                <div class="car_info">
                    <text class="car_info_name">验证码</text>
                    <input type="number" class="car_code_input" v-model="form.phonecode" placeholder="请输入验证码"/>
                    <wxc-button :text="sendTxt" type="blue" :btn-style="btnStyle2" :text-style="textStyle2" :disabled="sendDisable" @wxcButtonClicked="sendValidateCode"></wxc-button>
                </div>
                <div class="car_info">
                    <text class="car_info_name">公司名称</text>
                    <input type="text" class="car_info_input" v-model="form.companyname" placeholder="请输入公司名称"/>
                </div>
                <div class="car_info">
                    <text class="car_info_name">机构编号</text>
                    <input type="text" class="car_info_input" v-model="form.agencycode" placeholder="请输入机构编号"/>
                </div>
                <wxc-checkbox-list :list="storeTypeList"
                           @wxcCheckBoxListChecked="storeType"></wxc-checkbox-list>
                <div class="cont_first">
                    <text class="cont_fir1">所在城市</text>
                    <text class="cont_provice select_box border" @click="provice">{{proviceText.name}}</text>
                    <text class="cont_provice select_box border" @click="city">{{cityText.name}}</text>
                </div>
                <div class="cont_first">
                    <text class="cont_fir1">详细地址</text>
                    <input type="text" class="car_info_input" v-model="form.adress" placeholder="请输入详细地址"/>
                </div>
            </div>
            <div>
                <text class="car_image_angle">营业执照</text>
                <image class="car_image" :src="form.businesslicensepics" @click="upload()"></image>
            </div>
            <div class="itemFB protocol" @click="toProtocol">
                <text class="bTxt">我已阅读并同意</text>
                <text class="bbTxt">《商户服务协议》</text>
                <!--<wxc-checkbox class="bTxt" :disabled="true" :checked="true" title="并同意该协议"></wxc-checkbox>-->

            </div>
            <div class="button">
                <wxc-button text="提交审核"
                    @wxcButtonClicked="next" :btnStyle="btnStyle"></wxc-button>
            </div>
        </scroller>
        <div class="side_pop" ref="side" @swipe="swipePop">
            <list>
                <cell class="cell" v-for="item in list" @click="select(item)">
                    <text class="list_cont">{{item.name}}</text>
                </cell>
            </list>
        </div>
    </div>
</template>
<script>
import { WxcCheckboxList, WxcButton,WxcCheckbox } from 'weex-ui';
const animation = weex.requireModule('animation')
import header from '../../common/header'
export default {
    components: { WxcCheckboxList, WxcButton,WxcCheckbox, 
        'top-header': header, 
    },
    data () {
        return {
            token: '',
            list: [],
            proviceText: { name: '请选择省份' },
            cityText: { name: '请选择城市' },
            provinceList: [],
            cityList: [],
            storeTypeList: [
                { title: '优质商家', value: 1},
                { title: '维修保养', value: 2 },
            ],
            btnStyle: {
                'background-color': '#1E90FF',
            },
            selecData: '',
            form: {
                'adress': '',  // 地址
                'agencycode': '',  // 机构编码
                'area': '',  // 区
                'businesslicensepics': 'bmlocal://assets/acw/business.jpg',  // 营业执照
                'city': '',  // 城市
                'companyname': '',  // 公司名称
                'landline': '',  // 座机 
                'latitude': '',  // 纬度
                'longitude': '',  // 经度
                'ownername': '',  // 商家名称
                'ownerphone': '',  // 商家手机
                'phonecode': '',  // 验证码
                'province': '',  // 省份
                'status': 0, // 审核状态
                'storename': '',  // 店铺名称
                'type': '',  // 商家类型  1优质商检 2 保养维修 3 全部
            },
            btnStyle2: {
                width: '230px',
                height: '70px',
                lineHeight: '60px'
            },
            textStyle2: {
                fontSize: '28px'
            },
            sendDisable: false,
            sendTxt: '发送验证码',
            count: 60,
        }
    },
    created () {
        this.getProviceCityList(0) // 获取省份
        // let user = this.$storage.getSync('UserInfo')
    },
    mounted () {
    },
    methods: {
        //商家协议页面
        toProtocol() {
            this.$router.open({
                name: 'acw.merchant.agreement',
                type: 'PUSH'
            })
        },
        // 返回
        back () {
            this.$router.back();
        },
        // 滑动事件
        swipePop (e) {
            if (e.direction == 'left') {
                this.hide()
            }
        },
        hide () {
            this.sideAnima(-750, 800);
        },
        sideAnima (trans, time) {
            var sideEl = this.$refs.side;
            animation.transition(sideEl, {
                styles: {
                    transform: 'translateX(' + trans + 'px)',
                    transformOrigin: 'left center'
                },
                duration: time, //ms
                timingFunction: 'ease',
                delay: 0 //ms
            }, function () {
            })
        },
        select (item) {
            switch (this.selecData) {
                case 4:  // 省份
                    this.proviceText = item
                    this.form.province = item.name
                    this.hide()
                    this.getProviceCityList(item.id) // 获取市
                    break
                case 5:  // 市
                    this.cityText = item
                    this.form.city = item.name
                    this.hide()
                    break
                default:
                    break
            }
        },
        // 调取侧栏
        showSide (list, num) {
            this.selecData = num
            this.list = list
            this.sideAnima(750, 800);
        },
        // 封装数据
        dataPack (dataList, name) {
            for (let i = 0, length = dataList.length; i < length; i++) {
                dataList[i].name = dataList[i][name]
            }
            return dataList
        },
        
        next () {
            if (this.validterParam()) {
                this.$fetch({
                    method: 'POST',    // 大写
                    name: 'store.add', //当前是在apis中配置的别名，你也可以直接绝对路径请求 如：url:http://xx.xx.com/xxx/xxx
                    data: this.form,
                }).then(resData => {
                    // 成功回调
                    this.isShowLoad = false;
                    console.log(resData)
                    if(resData && resData.errno == 0){
                        this.back()
                    }
                    this.$notice.toast({ message: resData.errmsg})
                }, error => {
                    // 错误回调
                    this.isShowLoad = false;
                    console.log(error)
                })
            }   
                
        },
        // 查询省市
        getProviceCityList (id) {
            this.$fetch({
                method: 'POST',    // 大写
                name: 'region.childlist', //当前是在apis中配置的别名，你也可以直接绝对路径请求 如：url:http://xx.xx.com/xxx/xxx
                data: {
                    id: id
                }
            }).then(resData => {
                // 成功回调
                this.isShowLoad = false;
                console.log(resData)
                if(resData && resData.errno == 0){
                    if (!id) {
                        this.provinceList = resData.data
                    } else {
                        this.cityList = resData.data
                    }
                }
            }, error => {
                // 错误回调
                this.isShowLoad = false;
                console.log(error)
            })
        },
        // 选择省份
        provice () {
            this.showSide(this.provinceList, 4)
        },
        // 选择城市
        city () {
            if (!this.proviceText.id) {
                this.$notice.toast({ message: "请选择省份"})
                return
            }
            this.showSide(this.cityList, 5)
        },
        // 上传图片
        upload () {
            this.$image.pickAndUpload({
                allowCrop: false,             // 是否允许编辑（只有当 maxCount == 1时 此参数才会生效） 默认是false
                params: {},                  // 传递的参数
                header: {}                   // 自定义请求 header
            })
            .then(resData => {
                console.log(resData)    // [url1, url2...]
                // this.$notice.toast({ message: resData[0].data.url})
                this.form.businesslicensepics = resData[0].data.url
            }, error => {
                console.log(error)
                this.$notice.toast({ message: '上传失败'})
            })
        },
        // 商家类型
        storeType (e) {
            if (e.checkedList.length == 2) {
                this.form.type = 3
            } else {
                this.form.type = e.checkedList[0]
            }  
            // this.$notice.toast({ message: this.form.type})
        },
        // 校验值
        //         'area': '',  // 区
        //         'landline': '',  // 座机
        validterParam () {
            if (!this.form['province']) {
                this.$notice.toast({ message: '请选择省份'})
                return false
            } else if (!this.form['city']) {
                this.$notice.toast({ message: '请选择城市'})
                return false
            } else if (!this.form['adress']) {
                this.$notice.toast({ message: '请填写地址'})
                return false
            } else if (!this.form['agencycode']) {
                this.$notice.toast({ message: '请填写机构编码'})
                return false
            } else if (!this.form['businesslicensepics']) {
                this.$notice.toast({ message: '请上传营业执照'})
                return false
            } else if (!this.form['companyname']) {
                this.$notice.toast({ message: '请填写公司名称'})
                return false
            // } else if (!this.form['latitude']) {
            //     this.$notice.toast({ message: '请填写经度'})
            //     return false
            // } else if (!this.form['longitude']) {
            //     this.$notice.toast({ message: '请填写纬度'})
            //     return false
            } else if (!this.form['ownername']) {
                this.$notice.toast({ message: '请填写商家名称'})
                return false
            } else if (!this.form['ownerphone']) {
                this.$notice.toast({ message: '请填写手机号'})
                return false
            } else if (!this.form['phonecode']) {
                this.$notice.toast({ message: '请填写验证码'})
                return false
            } else if (!this.form['storename']) {
                this.$notice.toast({ message: '请填写店铺名称'})
                return false
            } else if (!this.form['type']) {
                this.$notice.toast({ message: '请选择商家类型'})
                return false
            }
            return true
        },
        showTime(obj){
            if (obj.count == 0) {
                // do job
                obj.sendTxt = "发送验证码";
                obj.count = 60;
                obj.sendDisable = false;
                return;
            } else {              
                obj.sendDisable = true;
                obj.sendTxt = "重新发送（" + obj.count + "S）"
                obj.count -= 1;
                setTimeout(function () {
                    obj.showTime(obj);
                }, 1000);
            }
        },
        sendValidateCode(e){
            console.log(":::::::::::::::::::::-- " + e.disabled);
            if(e.disabled) {
                return;
            }
            if(!this.form.ownerphone) {
                this.$notice.toast({ message: "请输入手机号"})
                return;
            }

            console.log(":::::::::::::::::::::-- " + this.count);
            // console.log(e.disabled);
            var vm = this;
            
            vm.$fetch({
                method: 'POST',    // 大写
                name: 'login.getMes', //当前是在apis中配置的别名，你也可以直接绝对路径请求 如：url:http://xx.xx.com/xxx/xxx
                data: {
                    mobile: this.form.ownerphone
                }
            }).then(resData => {
                // 成功回调
                console.log(resData)
                if(resData && resData.errno == 0) {
                    this.sendDisable = true;
                    this.showTime(vm);
                    vm.$notice.toast({ message: "发送成功"})
                } else {
                    vm.$notice.toast({ message: resData.errmsg});
                }
                
            }, error => {
                // 错误回调
                console.log(error)
                vm.$notice.toast({ message: "发送失败"})
            })
        },
    }
}
</script>
<style>
.iconfont {
    font-family: iconfont;
}
.wrapper{
    background-color: #fff;
}
.content{
    background-color: #fff;
}

.cont_first{
    flex-direction: row;
    align-items: center;
    height: 80px;
}
.cont_fir1{
    width: 160px;
    text-align: center;
    color: #666;
}
.cont_provice{
    width: 260px;
}

.car_image_angle{
    color: #666;
    height: 60px;
    line-height: 60px;
    margin: 10px;
}
.car_image{
    height: 400px;
    margin: 10px;
}
.border {
    border-style: solid;
    border-width: 1px;
    border-color: #666;
    border-radius: 6px;
}

.select_box{
    height: 60px;
    line-height: 60px;
    text-align: center;
    color: #666;
    margin-right: 16px;
    padding-right: 16px;
    padding-left: 16px;
}
.car_info{
    flex-direction: row;
    margin-top: 10px;
    margin-bottom: 10px;
    align-items: center;
}
.car_info_name{
    color: #666;
    width: 200px;
    text-align: center;
}
.car_info_input{
    width: 460px;
    border-style: solid;
    border-width: 1px;
    border-color: #666;
    border-radius: 5px;
    height: 70px;
    line-height: 70px;
    padding-left: 10px;
}
.car_code_input{
    width: 260px;
    border-style: solid;
    border-width: 1px;
    border-color: #666;
    border-radius: 5px;
    height: 70px;
    line-height: 70px;
    padding-left: 10px;
    margin-right: 30px;
}
.button{
    align-items: center;
    margin-top: 40px;
    margin-bottom: 40px;
}
/* 左侧弹窗 */
.side_pop{
    position: absolute;
    top: 138px;
    background-color: #fff;
    width: 750px;
    height: 1334px;
    padding-top: 100px;
    left: -750px;
}
.cell{
    width: 750px;
    border-bottom-color: #eee;
    border-bottom-style: solid;
    border-bottom-width: 1px;
}
.list_cont{
    color: #333;
    font-size: 30px;
    height: 100px;
    line-height: 100px;
    margin-left: 20px;
}
.itemFB {
    position: relative;
    width: 750px;
    bottom: 10px;
    /* background-color: #000; */
}
.protocol {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 50px;
    /* margin-bottom: 1px; */
}
.bTxt {
    color: #A5A5A5;
    font-size: 28px;
}

.bbTxt {
    color: blue;
    font-size:28px;
}

</style>
